<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/portal.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/tn3.css"></link>
	
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery.tn3lite.min.js"></script>

	<style type="text/css">
		body {margin:50px 0px; padding:0px; background-color: #000000;color: #ffffff;}
		#content {width:620px; margin:0px auto;}
		#desc {margin:10px; float:left; font-family: Arial, sans-serif; font-size: 12px;}
	</style>

</head>

<body class="easyui-layout">

    <div id="header" data-options="region:'north',border:false"></div>
    <div id="menu" data-options="region:'west',split:true,title:' '" style="width:250px;"></div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:250px;padding:10px;">
    </div>
    <div id="footer" data-options="region:'south',border:false"></div>

    <div data-options="region:'center',title:' '">
		<div style="margin-bottom:5px">
			<a href="explorer.html" title="Voltar"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>
		</div>

			<div id="images" class="easyui-layout" data-options="fit:true" >
			    <div id="mygallery" class="mygallery">
					<div class="tn3 album">
					    <h4>Fixed Dimensions</h4>
					    <div class="tn3 description">Images with fixed dimensions</div>
					    <div class="tn3 thumb">files/35x35/1.jpg</div>
					    <ol>
						<li>
						    <h4>Hohensalzburg Castle</h4>
						    <div class="tn3 description">Salzburg, Austria</div>
						    <a href="files/620x378/1.jpg">
							<img src="files/35x35/1.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Isolated sandy cove</h4>
						    <div class="tn3 description">Zakynthos island, Greece</div>
						    <a href="files/620x378/2.jpg">
							<img src="files/35x35/2.jpg" />
						    </a>
						</li>
						<li>
						    <h4>A view from the Old Town</h4>
						    <div class="tn3 description">Herceg Novi, Montenegro</div>
						    <a href="files/620x378/3.jpg">
							<img src="files/35x35/3.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Walls of the Old Town</h4>
						    <div class="tn3 description">Kotor, Montenegro</div>
						    <a href="files/620x378/4.jpg">
							<img src="files/35x35/4.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Boat in the port</h4>
						    <div class="tn3 description">Sousse, Tunis</div>
						    <a href="files/620x378/5.jpg">
							<img src="files/35x35/5.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Wall of the Jain temple</h4>
						    <div class="tn3 description">Jaisalmer, India</div>
						    <a href="files/620x378/6.jpg">
							<img src="files/35x35/6.jpg" />
						    </a>
						</li>
						<li>
						    <h4>City park</h4>
						    <div class="tn3 description">Negotin, Serbia</div>
						    <a href="files/620x378/7.jpg">
							<img src="files/35x35/7.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Taj Mahal mausoleum</h4>
						    <div class="tn3 description">Agra, India</div>
						    <a href="files/620x378/8.jpg">
							<img src="files/35x35/8.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Zante Port</h4>
						    <div class="tn3 description">Zakynthos, Greece</div>
						    <a href="files/620x378/9.jpg">
							<img src="files/35x35/9.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Rustovo Monastery</h4>
						    <div class="tn3 description">Budva, Montenegro</div>
						    <a href="files/620x378/10.jpg">
							<img src="files/35x35/10.jpg" />
						    </a>
						</li>
						<li>
						    <h4>The Mezquita, Cathedral and former Great Mosque</h4>
						    <div class="tn3 description">Cordoba, Spain</div>
						    <a href="files/620x378/11.jpg">
							<img src="files/35x35/11.jpg" />
						    </a>
						</li>
						<li>
						    <h4>Wine Cellars</h4>
						    <div class="tn3 description">Rajac, Serbia</div>
						    <a href="files/620x378/12.jpg">
							<img src="files/35x35/12.jpg" />
						    </a>
						</li>
					    </ol>
				    </div>		
				</div>
			</div>
    </div>

	<div id="upload" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:600px;height:400px;padding:10px;"></div>
    
    <script>
            $('#header').load('header.html');
            $('#footer').load('footer.html');
            $('#menu').load('menu.html');
            $('#upload').load('upload.html');
    </script>

	<script type="text/javascript">
		$(document).ready(function() {
			
			var tn1 = $('.mygallery').tn3({
				skinDir:"skins",
				imageClick:"fullscreen",
				image:{
				maxZoom:1.5,
				crop:true,
				clickEvent:"dblclick",
				transitions:[{
				type:"blinds"
				},{
				type:"grid"
				},{
				type:"grid",
				duration:460,
				easing:"easeInQuad",
				gridX:1,
				gridY:8,
				// flat, diagonal, circle, random
				sort:"random",
				sortReverse:false,
				diagonalStart:"bl",
				// fade, scale
				method:"scale",
				partDuration:360,
				partEasing:"easeOutSine",
				partDirection:"left"
				}]
			}
			});
			
		});

	</script>

	<script>
		function doSearchGallery(value){
			alert('You input: ' + value);
		}
	</script>

</body>

</html>

